<template>
    <h1>药房退药 </h1>
    <div class="flex flex-wrap gap-4">
       
      <el-card shadow="hover">
        <el-row>
          <el-col :span="8">
            <el-input
              size="large"
              placeholder="请输入患者病历号"
              v-model="searchObject.caseNumber"
            />
          </el-col>
          <el-col :span="8" :offset="1">
            <el-input
              size="large"
              placeholder="请输入患者姓名"
              v-model="searchObject.realName"
          /></el-col>
          <el-col :span="6" :offset="1">
            <el-button size="large" @click="getGiveRegisterInfo">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <!-- 显示退药的病人信息 -->
            <el-table :data="tableData" style="width: 100%; margin-top: 20px">
              <el-table-column prop="id" label="编号" />
              <el-table-column prop="realName" label="患者姓名" />
              <el-table-column prop="caseNumber" label="患者病历号" />
              <el-table-column prop="age" label="患者年龄" />
              <el-table-column prop="gender" label="患者性别" />
              <el-table-column >
                <template #default="scope">
                  <el-button
                    type="primary"
                    @click="showPrecMedicine(scope.row)"
                  >
                   显示药品
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            
              <el-pagination @current-change="handleCurrentChange"
               style="margin-top: 15px;"
                layout="prev, pager, next ,total,jumper,sizes"  
                 v-model:currentPage="currentPage"
                v-model:page-size="pageSize"
                 :page-sizes="[5, 10, 15]" 
                 :total="total" />
          
          </el-col>
        </el-row>
      </el-card>
      <h1>退药信息</h1>
      <el-card shadow="never"> 
      
         
            <el-table :data="presTableData" style="width: 100%; margin-top: 20px">
              <el-table-column prop="id" label="编号" />
              <el-table-column prop="drug_code" label="药品编号" />
              <el-table-column prop="drug_name" label="药品名称" />
          
              <el-table-column prop="drug_unit" label="包装单位" />
              
              <el-table-column prop="drug_price" label="单价" />
              <el-table-column prop="drug_number" label="药品数量" />
              <el-table-column >
                <template #default="scope">
                  <el-button
                    type="primary"
                    @click="reBackMedicine(scope.row)"
                  >
                   全退
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
      
        
      </el-card>
  
  
    </div>
  </template>
  <script setup>
  import axios from "axios";
  import { ref, reactive, watch } from "vue";
  //每页显示的数量，默认每页显示5条记录
  const pageSize = ref(5)
  //当前页，默认第一页
  const currentPage = ref(1)
  const handleCurrentChange =()=>{
     console.log('-------',currentPage.value,pageSize.value)
     getGiveRegisterInfo();
  }
  const presTableData=ref([]);
  //搜索已发药的病人信息
  const showPrecMedicine=(row)=>{
    axios
      .get(`/drugstore/api/prescription/getPrescriptionByRegisterId/${row.id}/100/1`,{
        params:{drugState:"已发药"}
      })
      .then(function (response) {
        let { data } = response;
        presTableData.value = data.results.list;
      
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  
  const reBackMedicine=(row)=>{
    console.log(row)
    ///${row.id}/${row.drug_code}/${row.drug_number}/${row.drug_price}
    // /${row.drug_id}/${row.employee_id}/${row.register_id}
    axios
      .put(`/drugstore/api/prescription/repercussionDrugById`,{
        id:row.id,
        drugCode:row.drug_code,
        drugNumber:row.drug_number,
        drugPrice:row.drug_price,
        drugId:row.drug_id,
        employeeId:row.employee_id,
        registerId:row.register_id
      })
      .then(function (response) {
        // let { data } = response;
        // presTableData.value = data.results.list;
        //前端处理  将数组的元素从数组里移除出去
        // let arr = presTableData.value;
        // console.log(arr)
        let newArrayData=presTableData.value.filter((item)=>item.id!=row.id)
        presTableData.value=newArrayData;
  
  
        console.log('更新成功')
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  const tableData = ref([]);
  let total = ref(0);
  let searchObject = reactive({ realName: "", caseNumber: "" });
  //获得已发药的病人信息
  const getGiveRegisterInfo = () => {
    axios
      .get("/drugstore/api/register/getRegisterPrescriptInfo", {
        params:{realName:searchObject.realName, 
            caseNumber:searchObject.caseNumber,
             pageSize:pageSize.value,
             drugState:"已发药",
             currentPage:currentPage.value}
      })
      .then(function (response) {
        let { data } = response;
        tableData.value = data.results.list;
        total.value=data.results.total
      })
      .catch(function (error) {
        console.log(error);
      });
  };
  getGiveRegisterInfo();
  watch(searchObject, () => {
    getGiveRegisterInfo();
  });
  </script>
  <style scoped>
  
  </style>
  